<include file="Public/mobile_head_list_jquery"/>
<body>

<style type="text/css">
    a {
        text-decoration: none
    }
</style>

<div class="easyui-navpanel">
    <header>
        <div class="m-toolbar">
            <div class="m-title">课程列表</div>
            <div class="m-left">
                <a href="__SELF__" class="easyui-linkbutton" data-options="plain:true">全部</a>
            </div>
            <div class="m-right">
                <a href="javascript:void(0)" class="easyui-menubutton"
                   data-options="iconCls:'icon-more',plain:true,hasDownArrow:false,menu:'#mm',menuAlign:'right'"></a>
            </div>
        </div>
    </header>
    <div id="mm" class="easyui-menu" style="width:150px;" data-options="itemHeight:30,noline:true">
        <div data-options="iconCls:'icon-undo'"><a href="__SELF__">全部</a></div>
        <div class="menu-sep"></div>
        <div>升学</div>
        <div class="menu-sep"></div>
        <div>语文</div>
        <div>数学</div>
        <div>英语</div>
    </div>
    <div class="easyui-tabs"
         data-options="tabHeight:60,fit:true,tabPosition:'bottom',border:false,pill:true,narrow:true,justified:true">
        <div style="padding:10px">
            <div class="panel-header tt-inner">
                <br>公开课表
            </div>
            <ul class="easyui-datalist m-list" data-options="
                fit: true,
                lines: true,
                border: false,
                textFormatter: function(value){
                    return '<a href\'javascript:void(0)\' class=\'datalist-link\'>' + value + '</a>';
                },
                ">
                <volist name="list_data" id="vo">
                    <li class="tt">
                        <span id="detail-id" style="display: none">{$vo.id}</span>
                        <notempty name="vo.cover"><img style="display: inline-block;float: left;margin-right: 10px;"
                                                       width="20%" class="image" src="{$vo.cover|get_cover_url}"/>
                        </notempty>
                        <div style="display: inline-block;width:70%">
                            <h3 style="font-size: 16px;height: 30%">{$vo.title}</h3>

                            <div class="list-wenzi-div" style="margin-top: 10px;">
                                <div style="width:140px;" class="colorless">{$vo.course_time}</div>
                                <div style="">讲师：{$vo.author}</div>
                                <div style="width:100px;"><span style="color: #f00">{$vo.view_count}</span>人报名</div>
                            </div>
                        </div>
                    </li>
                </volist>
            </ul>
        </div>
        <div style="padding:10px">
            <div class="panel-header tt-inner">
                <br>我的公开课
            </div>
            <span>
                <ul class="small_pic_list" style="margin-left: 0px;padding-left: 0px;margin-top: 0px;">
                    <li>
                        <a href="http://local.com/gongkaike/index.php?s=/addon/WeiSite/WeiSite/detail/id/1.html">
                            <img src="http://local.com/gongkaike/Uploads/Picture/2016-03-25/56f4adbc8316a.jpg"/>
                            <h6 class="h6">海风第一期公开课</h6>

                            <div class="colorless">2016-03-24 14:51</div>
                            <div style="padding-left: 20px;">第一期公开课简介</div>
                            <div style="float: right;"><span style="color: #f00">333</span>人报名</div>
                        </a>
                    </li>
                </ul>
                <!-- 分页 -->
                <div class="page"></div>
            </span>

        </div>
    </div>
</div>
<style scoped>
    .tt-inner {
        display: inline-block;
        line-height: 12px;
        padding-top: 5px;
    }

    p {
        line-height: 150%;
    }

    .list-wenzi-div div {
        padding-right: 10px;
        float: left;
    }

    .top-line {
        border-top: 1px solid #ccc;
        padding: 15px 0 10px 0;
    }
</style>


<div id="p2" class="easyui-navpanel">
    <div class="easyui-tabs"
         data-options="tabHeight:60,fit:true,tabPosition:'bottom',border:false,pill:true,narrow:true,justified:true">
        <!--onclick='window.location.href="?s=/addon/Reserve/Wap/index/reserve_id/1/publicid/2.html&publicid=2&openid=-2"'-->
        <div style="padding:10px">
            <div id="go-to-apply" class="panel-header tt-inner">
                我要报名
            </div>
            <section class="content">
                <p id="p2-pic-url"><img src="{$info.cover|get_cover_url}"/></p>

                <h3 id="p2-title" style="font-weight: bolder;font-size: 20px; margin: 15px 0px;">{$info.title}</h3>

                <div class="top-line">
                    <h4 style="display: inline-block">开课时间：</h4><span id="p2-start-time">{$info.start_time}~{$info.end_time}</span>
                </div>
                <div class="top-line">
                    <h4 style="display: inline-block">主讲老师：</h4><span id="p2-author">{$info.author}</span>
                </div>
                <h4 class="top-line">课程介绍：</h4>

                <p id="p2-content"></p>
                {$info.content|htmlspecialchars_decode}
            </section>
        </div>
        <div style="padding:10px">
            <div class="panel-header tt-inner">
                点击进入
            </div>

            <section class="content">
                <notempty name="info.cover"><p><img src="{$info.cover|get_cover_url}"/></p></notempty>
                {$info.content|htmlspecialchars_decode}
            </section>
        </div>
    </div>
</div>
<div id="p3" class="easyui-navpanel">
    <header>
        <div class="m-toolbar">
            <div class="m-title">Panel2</div>
            <div class="m-left">
                <a href="#" class="easyui-linkbutton m-back" data-options="plain:true,outline:true,back:true"
                   style="width:50px">Back</a>
            </div>
        </div>
    </header>
    <div style="margin:50px 0 0;text-align:center">
        <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100px;height:30px"
           onclick="$.mobile.back()">Go Back</a>
    </div>
</div>

<div id="dlg1" class="easyui-dialog" style="padding:10px 10px;width:90%;font-size: 16px;"
     data-options="inline:true,modal:true,closed:true,title:'报名'">
    <div>
        <label>姓名：</label>
        <input class="easyui-textbox" prompt="姓名(必填)" style="width:100%">
    </div>
    <div>
        <label>手机号：</label>
        <input class="easyui-numberbox" prompt="手机号(必填)" style="width:100%">
    </div>
    <div>
        <label>验证码：</label>
        <br/>
        <input class="easyui-numberbox" prompt="验证码(必填)" style="width:60%"><a class="easyui-linkbutton c3"
                                                                              id="send-sms-code-btn"
                                                                              style="width:35%;margin-left: 10px;height: 30px;">获取验证码</a>
    </div>
    <div>
        <label>邀请码：</label>
        <input class="easyui-numberbox" prompt="邀请码" style="width:100%">
    </div>
    <div>
        <label>Volumn</label>
        <input class="easyui-slider" value="10" style="width:100%">
    </div>
    <div id="hint" style="display: none; margin-top: 10px;">
    </div>
    <div class="dialog-button">
        <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%;height:35px"
           onclick="$('#dlg1').dialog('close')">报名</a>
    </div>
</div>

<script>
    $( function() {
        $( '#dlg1' ).dialog( 'close' )
        $( ".datagrid-cell" ).click( function() {
            var id = $( this ).find( '#detail-id' ).text();
            getDetailById( id );

            $.mobile.go( '#p2' );
        } )
        $( ".tabs-first" ).click( function() {
            $( '#dlg1' ).dialog( 'open' ).dialog( 'center' )
            //window.location.href="?s=/addon/Reserve/Wap/index/reserve_id/1/publicid/2.html&publicid=2&openid=-2"
        } )
        $( ".tabs-last" ).click( function() {
            $.mobile.go( '#p3' )
            //window.location.href="?s=/addon/Reserve/Wap/index/reserve_id/1/publicid/2.html&publicid=2&openid=-2"
        } )
        $( "#send-sms-code-btn" ).click( function() {
            sendSMSCode();
        } )

        setInterval( function() {
            if( window.location.href.split( '#&' )[ 1 ] != 'p2' ) {
                $( '#dlg1' ).dialog( 'close' );
            }
        }, 100 )

    } )
    function getDetailById( id ) {
        $.get( "{:U('detail')}", { id: id }, function( data ) {
            if( typeof (data.cover) != "undefined" ) {
                $( "#p2-pic-url img" ).attr( 'src', data.cover );
            }
            else {
                $( "#p2-pic-url" ).html( '' );
            }
            $( "#p2-title" ).text( data.title );
            $( '#p2-content' ).html( data.content );
            $( '#p2-start-time' ).text( data.start_time + "~" + data.end_time );
            $( '#p2-author' ).text( data.author );

        }, 'json' )
    }
    function getLogin() {
        var p3 = $( "#p3" ).text();
        alert( p3 );
    }
    function sendSMSCode() {
        var phone = $.trim( $( "input[name=phone]" ).val() );

        /*$.post('url',{phone:phone},function(data){
         alert();
         })*/
        $( "#hint" ).html( '<span style="color:#238E23">验证码已经发送</span>' ).delay( 100 ).fadeIn( 400 ).delay( 1000 ).fadeOut( 400 );
    }
</script>
<?php exit(); ?>

<style type="text/css">
    .banner {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .banner ul {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        -webkit-animation:
    }

    .banner ul li {
        float: left;
        display: table-cell;
        position: relative
    }

    .banner li a {
        width: 100%;
        height: 100%;
        display: block;
    }

    .banner li .title {
        background-color: RGBA(0, 0, 0, .5);
        height: 30px;
        color: #fff;
        line-height: 30px;
        padding-left: 10px;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 1000;
    }

    .identify {
        text-align: right;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 100;
        height: 30px;
    }

    .identify em {
        display: inline-block;
        margin: 10px 5px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        margin-left: 5px;
        width: 12px;
        height: 12px;
        background: #fff;
    }

    .identify em.cur {
        background-color: #090
    }

    .small_pic_list li {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #ccc;
        height: 80px;
        overflow: hidden;
    }

    .small_pic_list li a {
        display: block;
        padding: 10px 10px 10px 80px;
        position: relative;
        min-height: 60px;
        color: #333
    }

    .small_pic_list li a:active {
        background-color: #CCC
    }

    .small_pic_list li a img {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 60px;
        height: 60px;
    }

    .small_pic_list li a h6 {
        font-size: 18px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .small_pic_list li a p {
        color: #999;
        font-size: 13px;
        line-height: 22px;
    }
</style>
<body id="weisite">

<div class="container">
    <ul class="small_pic_list" style="margin-left: 0px;padding-left: 0px;">
        <volist name="list_data" id="vo">
            <li>
                <a href="{:U('detail', 'id='.$vo[id])}">
                    <notempty name="vo.cover"><img src="{$vo.cover|get_cover_url}"/></notempty>
                    <h6>{$vo.title}</h6>

                    <p>{$vo.intro}</p>
                    <span class="colorless">{$vo.cTime|time_format}</span>
                </a>
            </li>
        </volist>
    </ul>
    <!-- 分页 -->
    <div class="page"> {$_page|default=''}</div>
</div>
<!-- 底部导航 -->
{$footer_html}
<!-- 统计代码 -->
<notempty name="config.code">
    <p class="hide bdtongji">
        {$config.code}
    </p>
    <else/>
    <p class="hide bdtongji">
        {$tongji_code}
    </p>
</notempty>
</body>
<script type="text/javascript">
    $( function() {
        //$.WeiPHP.initBanner(true,5000);
    } )

</script>
</html>